{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import google_play_button, apple_app_store_button with context %}
{% from "macros-protocol.html" import callout with context %}

{% extends "firefox/welcome/base.html" %}

{% block page_title %}{{ ftl('welcome-page6-make-firefox-your-default') }}{% endblock %}

{% block body_class %}{{ super() }} welcome-page6{% endblock %}

{% set _entrypoint = 'mozilla.org-firefox-welcome-6' %}
{% set _utm_campaign = 'welcome-6-default-browser' %}

{% set android_url = play_store_url('firefox', 'firefox-welcome-6') %}
{% set ios_url = app_store_url('firefox', 'firefox-welcome-6') %}
{% set show_send_to_device = LANG in settings.SEND_TO_DEVICE_LOCALES %}

{%block page_css %}
 {{ super()}}
 {{ css_bundle('protocol-callout') }}
{% endblock %}

{% block content_intro %}
  {% call callout(
    title=ftl('welcome-page6-make-sure-youre-protected'),
    desc=ftl('welcome-page6-when-you-choose-firefox-you'),
    class='mzp-t-firefox mzp-t-dark mzp-t-hero',
    include_cta=True,
    heading_level=1
  ) %}

  <div class="primary-cta">
    <div class="state-not-default">
      <a id="set-as-default-button" href="{{ url('firefox.set-as-default.thanks') }}" class="mzp-c-button mzp-t-product" data-cta-text="Make Firefox your default browser" data-testid="button-firefox-default">
        {{ ftl('welcome-page6-make-firefox-your-default') }}
      </a>
    </div>
    <div class="state-is-default">
      <button type="button" class="mzp-c-button mzp-t-product js-modal-link" data-testid="button-firefox-get-app">{{ ftl('welcome-page6-get-the-firefox-app') }}</button>
    </div>
  </div>
  {% endcall %}

  <aside id="modal" class="mzp-u-modal-content mzp-l-content">
    <h3 class="modal-title">{{ ftl('welcome-page6-get-firefox-on-your-phone') }}</h3>

    {% if show_send_to_device %}
      {{ send_to_device(include_title=False, message_set='fx-whatsnew') }}
    {% else %}
      <p>{{ ftl('welcome-page6-scan-the-qr-code-to-get-started') }}</p>
      <div class="qr-code-wrapper">
        <img src="{{ static('img/firefox/welcome/qrcode-firefox-welcome-6.png') }}"
            id="firefox-qr"
            data-testid="firefox-qr-code"
            alt="{{ ftl('welcome-page6-qr-code-to-scan-for-firefox') }}">
      </div>
    {% endif %}

    <ul class="mobile-download-buttons c-store-badges" id="mobile-download-buttons-firefox">
      <li>
        {{ google_play_button(href=android_url, id='playStoreLink') }}
      </li>
      <li>
        {{ apple_app_store_button(href=ios_url, id='appStoreLink') }}
      </li>
    </ul>
  </aside>
{% endblock %}

{% block content_primary %}
  <div class="body-primary">
    <div class="c-picto-block t-adjacent-image">
      <div class="c-picto-block-image">
        <img src="{{ static('img/icons/privacy.svg') }}" alt="">
      </div>

      <h3 class="c-picto-block-title">{{ ftl('welcome-page6-choose-automatic-privacy') }}</h3>
      <div class="c-picto-block-body">
        <p>{{ ftl('welcome-page6-companies-keep-finding-new') }}</p>
      </div>
    </div>

    <div class="c-picto-block t-adjacent-image">
      <div class="c-picto-block-image">
        <img src="{{ static('img/icons/mobile-desktop.svg') }}" alt="">
      </div>
      <h3 class="c-picto-block-title">{{ ftl('welcome-page6-choose-freedom-on-every-device') }}</h3>
      <div class="c-picto-block-body">
        <p>{{ ftl('welcome-page6-firefox-is-fast-and-safe-on') }}</p>
      </div>
    </div>

    <div class="c-picto-block t-adjacent-image">
      <div class="c-picto-block-image">
        <img src="{{ static('img/icons/mountain.svg') }}" alt="">
      </div>
      <h3 class="c-picto-block-title">{{ ftl('welcome-page6-choose-corporate-independence') }}</h3>
      <div class="c-picto-block-body">
        <p>{{ ftl('welcome-page6-firefox-is-the-only-major') }}</p>
      </div>
    </div>
  </div>
{% endblock %}

{% block content_utility %}
<p>
  <strong>
    <a href="https://support.mozilla.org/kb/firefox-browser-welcome-pages/?utm_source={{ _entrypoint }}&utm_medium=referral&utm_campaign={{ _utm_campaign }}&entrypoint={{ _entrypoint }}">
      {{ ftl('welcome-page6-why-am-i-seeing-this') }}
    </a>
  </strong>
</p>
{% endblock %}

{% block js %}
  {{ js_bundle('firefox_welcome_page6') }}
{% endblock %}
